﻿<div ng-controller="BookEditorController as BookEditor" class="modal fade" id="bookAddDialog" tabindex="-1" role="dialog" aria-hidden="true">
    <form novalidate name="bookAddForm" class="css-form form-horizontal" role="form" ng-submit="bookAddForm.$valid ? commit(book) : false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add a book</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="bookTitle" class="col-sm-2 control-label">Title</label>
                            <div class="col-sm-10">
                                <input ng-maxlength="30" ng-model="book.title" type="text" class="form-control" name="bookTitle" placeholder="Enter a book title here (required)..." required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookYear" class="col-sm-2 control-label">Year</label>
                            <div class="col-sm-10">
                                <input min="1800" ng-model="book.year" type="number" class="form-control" id="bookYear" placeholder="Enter a book year here...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookPages" class="col-sm-2 control-label">Pages</label>
                            <div class="col-sm-10">
                                <input min="0" max="10000" ng-model="book.pages" type="number" class="form-control" id="bookPages" placeholder="Enter a book pages (required)..." required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookISBN" class="col-sm-2 control-label">ISBN</label>
                            <div class="col-sm-10">
                                <input ng-pattern="isbnStandard" ng-model="book.isbn" type="text" class="form-control" id="bookISBN" placeholder="XXX-X-XX-XXXXXX-X" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookPublisher" class="col-sm-2 control-label">Publisher</label>
                            <div class="col-sm-10">
                                <input ng-maxlength="30" ng-model="book.publisher" type="text" class="form-control" id="bookPublisher" placeholder="Enter a book publisher..." required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="well"><b>Authors</b>:
                                <span class="label label-primary margin" ng-repeat="author in book.authors"> 
                                    {{author.Name}} {{author.LastName}} <span data-toggle="tooltip" data-placement="bottom" title="Click to remove author." class="glyphicon glyphicon-remove-circle small" ng-click="BookListCtrl.removeAuthor($index, book, true)"></span>
                                </span>
                                <span class="label label-success margin"> 
                                    Add author <span data-toggle="tooltip" data-placement="bottom" title="Click to add author." class="glyphicon glyphicon-plus small" ng-click="BookEditor.editAuthors(true)"></span>
                                </span>
                            </div>
                            
                            <div ng-if="authorsEdit">
                             
                                <label for="authorName" class="col-sm-2 control-label">Name</label>
                                <div class="col-sm-10">
                                    <input name="authName" ng-maxlength="20" ng-model="newAuthor.Name" type="text" class="form-control" placeholder="Enter a name" required>
                                </div>

                                <label for="authorLastName" class="col-sm-2 control-label">Last name</label>
                                <div class="col-sm-10">
                                    <input name="authLastName" ng-maxlength="20" ng-model="newAuthor.LastName" type="text" class="form-control" placeholder="Enter a last name" required>
                                </div>
                                
                                <label for="addAuth" class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <input name="addAuth" ng-click="commitAuthor()" type="button" class="btn btn-success form-control" ng-disabled="(!bookAddForm.authName.$valid) || (!bookAddForm.authLastName.$valid) " value="Add" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bookCover" class="col-sm-2 control-label">Cover</label>
                            <div class="col-sm-10">
                                <input type="file" class="form-control" name="bookCover" cover-upload="bookCover">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="BookEditor.rollback()">Cancel</button>
                        <input type="submit" class="btn btn-primary" ng-disabled="!bookAddForm.$valid || !book.authors.length" value="Save" />        
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>